<template>
	<view>
		<u-popup mode="center" v-model="show" border-radius="20" width="624rpx">
			<view class="container">
				<image src="https://xyshop.outletds.com/img/abandon.jpg" mode="aspectFit" class="head-img"></image>
				<view class="title">确认放弃</view>
				<view class="remark">当前所邀请的<br />好友将清零处理，不可恢复！</view>
				<view class="btns">
					<view class="left btn" @click="closeModal()">返回</view>
					<view class="right btn" @click="handler('confirm')">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dialogSyncClose from "@/mixin/dialog-sync-close.js"
	export default {
		mixins: [dialogSyncClose()],
		methods:{
			closeModal(){
				this.show = false
			},
			handler(event){
				this.closeModal()
				this.$emit(event)
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-img {
		width: 162rpx;
		height: 112rpx;
	}

	.container {
		@extend .flex-center;
		flex-direction: column;
		padding: 60rpx 70rpx;

		.title {
			margin: 30rpx 0 50rpx 0;
			font-size: 36rpx;
			font-weight: bold;
		}

		.remark {
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
		}

		.btns {
			@extend .flex-btw;
			width: 100%;

			.btn {
				width: 234rpx;
				height: 80rpx;
				border-radius: 8rpx;
				margin-top: 30rpx;
				@extend .flex-center;
				font-size: 32rpx;

				&.left {
					border: 1px solid #979797;
					color: #FF9500;
				}

				&.right {
					background-color: #FF9500;
					color: #FFF;
				}
			}

		}
	}
</style>
